<template>
  <view class="decoration">
    <view class="topImg">
      <image src="/static/decoration/banner.png" mode="scaleToFill"></image>
    </view>
    <view class="title">
      <view class="content-title">
        请填以下表格并提交
      </view>
      <view class="content-English">
        Please fill in the form below and submit it
      </view>
      <view class="content-title">
        集网装饰会尽快与您联系！
      </view>
      <view class="content-English">
        Set network decoration will contact you as soon as possible!
      </view>
    </view>
    <view class="fromSubmit">
      <view class="from-item">
        <view class="item-title">
          <text class="from-item-title">姓名</text>
          <text class="from-item-English">/Telephone</text>
        </view>
        <input class="uni-input" v-model="formSubmit.userName" placeholder="请输入姓名" />
      </view>
      <view class="from-item">
        <view class="item-title">
          <text class="from-item-title">电话</text>
          <text class="from-item-English">/Housing area</text>
        </view>
        <input class="uni-input" v-model="formSubmit.phone" placeholder="请输入电话" />
      </view>
      <view class="from-item">
        <view class="item-title">
          <text class="from-item-title">房屋面积</text>
          <text class="from-item-English">/Housing area</text>
        </view>
        <input class="uni-input" v-model="formSubmit.area" placeholder="请输入房屋面积" />
      </view>
      <view class="from-item">
        <view class="item-title">
          <text class="from-item-title">项目地址</text>
          <text class="from-item-English">/Project address</text>
        </view>
        <input class="uni-input" v-model="formSubmit.address" placeholder="请输入项目地址" />
      </view>
      <view class="from-item">
        <view class="item-title">
          <text class="from-item-title">要求</text>
          <text class="from-item-English">/Requirement</text>
        </view>
        <textarea class="from-item-textarea" maxlength="240" v-model="formSubmit.remark" />
      </view>
      <button type="warn" class="from-button" @click="submit">提交 /Submit</button>
    </view>
    <tabBar :currentPage="'tabBar3'"></tabBar>
  </view>
</template>

<script>
import tabBar from '@/components/tabBar.vue'

export default {
  components: {
    tabBar
  },
  data() {
    return {
      formSubmit: {
        userName: '',
        phone: '',
        area: '',
        address: '',
        remark: '',
      }
    }
  },
  methods: {
    submit() {
      if (this.formSubmit.phone === '') {
        uni.showToast({ title: '联系方式不能为空', icon: 'none' })
        return
      }
			const myreg = /^1[3456789]\d{9}$/;
			if (!myreg.test(this.formSubmit.phone)) {
        uni.showToast({ title: '手机号格式不正确', icon: 'none' })
        return
      }
      let params = this.formSubmit
      this.$api.register(params).then(res => {
        if (res.success) {
          uni.showToast({ title: '提交成功', icon: 'success' })
          // 提交成功赋值为空
          Object.keys(this.formSubmit).map(key => this.formSubmit[key] = '')
        } else {
          uni.showToast({ title: res.msg });
        }
      }).catch(err => {
          console.log('request fail', err)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.decoration {
  .topImg {
    width: 100%;
    height: 288rpx;
    image {
      width: 100%;
      height: 288rpx;
    }
  }
  .title {
    padding: 0 0 30rpx 0;
    background: #F6F6F6;
    .content-title {
      text-align: center;
      font-size: 34rpx;
      font-weight: bold;
      color: #333333;
      padding-top: 30rpx;
    }
    .content-English {
      text-align: center;
      padding: 0 80rpx;
      font-size: 28rpx;
      color: #999999;
    }
  }
  .fromSubmit {
    padding: 40rpx;
    .from-item {
      margin-bottom: 40rpx;
      .item-title {
        margin-bottom: 20rpx;
        .from-item-title {
          font-size: 32rpx;
          font-weight: 500;
          color: #333333;
          margin-right: 20rpx;
        }
        .from-item-English {
          font-size: 28rpx;
          font-weight: 500;
          color: #999999;
        }
      }
      .uni-input {
        background: #F6F6F6;
        border-radius:4px;
      }
      .from-item-textarea {
        background: #F6F6F6;
        width: 100%;
        border-radius:4px;
				padding: 20rpx;
				font-size: 28rpx;
				box-sizing: border-box;
      }
    }
    .from-button {
      background: $uni-color-base;
    }
  }
}
</style>
